<template>
  <div class="tab_from">
    <div class="mainInfo">
      <div class="mainInfo__button">
        <el-button @click="dialogTableVisible = true" type="primary" class="issueAdd"><el-icon><DocumentAdd /></el-icon>新增</el-button>
      </div>

      <inform-type-table />

    </div>
  </div>

  <!-- 弹出层 -->
  <el-dialog v-model="dialogTableVisible" title="编辑类型">
    <div class="popupDiv">
      <span>类型名称：</span>
      <el-input v-model="inputType" placeholder="请输入" />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取消</el-button>
        <el-button type="primary" @click="typeAdd">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import InformTypeTable from './tabularData/InformTypeTable.vue'
import service from "@/api";
import {jxTypeAdd} from "@/api/jiaxiaohutong";
import { ElNotification } from 'element-plus'

const dialogTableVisible = ref(false)


const inputType = ref('')
const typeAdd = async () => {
  const res = await service.jiaxiaohutong.jxTypeAdd(inputType.value)
  console.log(res.data)
  if(res.data.code === 200){
    ElNotification({
      title: 'OK',
      message: '新增成功',
      type: 'success',
    })
  }
  dialogTableVisible.value=false
}
</script>

<style scoped>
.mainInfo__button{
  display: flex;
  justify-content: right;
  margin: 10px 0;
}

.tab_from{
  border: 1px solid #d9d9d9;
  padding: 10px;
}

.mainInfo__form :deep(.el-text){
  margin: 0 10px;
}

.popupDiv{
  display: grid;
  grid-template-columns: 80px 620px;
  justify-content: center;
  align-items: center;
}
/* 分页样式 */
.datapagerEl{
  display: flex;
  align-items: center;
  justify-content: right;
  font-size: 12px;
}
.datapagerEl div{
  margin-right: 10px;
}
.datapagerEl_1{
  display: flex;
}
.datapagerEl_1 p{
  width: 36px;
  background-color: #1ec695;
  text-align: center;
  font-size: 12px;
  line-height: 22px;
}
.datapagerEl_1 button{
  background-color: #ffffff;
  border-color: #cecece;
  border-width: 1px;
}

.datapagerEl_1_btn1{
  border-style: solid none solid solid;

}
.datapagerEl_1_btn2{
  border-style: solid solid solid none;
}

.datapagerEl_2 p{
  font-size: 12px;
}
.datapagerEl_2 span{
  font-size: 16px;
}

.datapagerEl_3_input{
  margin: 0 10px;
  width: 18px;
  height: 16px;
  font-size: 12px;
}

.datapagerEl_3_Btn{
  width: 36px;
  height: 25px;
  font-size: 12px;
}

.datapagerEl_4 button{
  width: 72px;
  height: 25px;
  font-size: 12px;
}
.datapagerEl_4 span{
  font-size: 10px;
}
</style>
